<template>
  <div class="tech-card" :class="{ 
    disabled: !canResearch, 
    researched: isResearched,
    locked: !canResearch && !isResearched 
  }">
    <div class="card-header">
      <div class="tech-icon">{{ tech.icon || '🔬' }}</div>
      <div class="tech-info">
        <h4 class="tech-name">{{ tech.name }}</h4>
        <div class="tech-category">{{ getCategoryName(tech.category) }}</div>
      </div>
      <div class="tech-status">
        <div class="status-indicator" :class="getStatusClass()">
          {{ getStatusText() }}
        </div>
        <button 
          class="info-btn"
          @click="$emit('info', tech)"
          title="查看详细信息"
        >
          ℹ️
        </button>
      </div>
    </div>

    <div class="card-content">
      <div class="tech-description">
        {{ tech.description }}
      </div>

      <!-- 科技效果 -->
      <div class="tech-effects" v-if="tech.effects?.length">
        <div class="effects-title">研究效果:</div>
        <div class="effects-list">
          <div 
            v-for="effect in tech.effects" 
            :key="effect.type"
            class="effect-item"
          >
            <span class="effect-icon">{{ getEffectIcon(effect.type) }}</span>
            <span class="effect-text">{{ formatEffect(effect) }}</span>
          </div>
        </div>
      </div>

      <!-- 解锁内容 -->
      <div class="tech-unlocks" v-if="tech.unlocks?.length">
        <div class="unlocks-title">解锁内容:</div>
        <div class="unlocks-list">
          <div 
            v-for="unlock in tech.unlocks" 
            :key="unlock.type + unlock.id"
            class="unlock-item"
          >
            <span class="unlock-icon">{{ getUnlockIcon(unlock.type) }}</span>
            <span class="unlock-text">{{ formatUnlock(unlock) }}</span>
          </div>
        </div>
      </div>

      <!-- 前置条件 -->
      <div class="tech-prerequisites" v-if="tech.prerequisites?.length">
        <div class="prerequisites-title">前置条件:</div>
        <div class="prerequisites-list">
          <div 
            v-for="prereq in tech.prerequisites" 
            :key="prereq"
            class="prerequisite-item"
            :class="{ met: isPrerequisiteMet(prereq) }"
          >
            <span class="prerequisite-icon">
              {{ isPrerequisiteMet(prereq) ? '✅' : '❌' }}
            </span>
            <span class="prerequisite-text">{{ getPrerequisiteName(prereq) }}</span>
          </div>
        </div>
      </div>

      <!-- 研究成本 -->
      <div class="tech-cost" v-if="tech.cost">
        <div class="cost-title">研究成本:</div>
        <div class="cost-item">
          <span class="cost-icon">🔬</span>
          <span class="cost-amount">{{ formatNumber(tech.cost) }} 研究点</span>
        </div>
      </div>

      <!-- 研究时间 -->
      <div class="research-time" v-if="tech.researchTime">
        <span class="time-icon">⏱️</span>
        <span class="time-text">研究时间: {{ formatTime(tech.researchTime) }}</span>
      </div>
    </div>

    <div class="card-footer">
      <button 
        v-if="!isResearched"
        class="research-btn"
        :class="{ disabled: !canResearch }"
        :disabled="!canResearch"
        @click="$emit('research', tech)"
      >
        <span class="btn-icon">🔬</span>
        <span class="btn-text">{{ getButtonText() }}</span>
      </button>
      <div v-else class="researched-badge">
        <span class="badge-icon">✅</span>
        <span class="badge-text">已研究</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useTechnologyStore, useResourcesStore } from '@/stores'

interface TechEffect {
  type: string
  value: number
}

interface TechUnlock {
  type: string
  id: string
  name?: string
}

interface Tech {
  id: string
  name: string
  description: string
  category: string
  icon?: string
  cost?: number
  researchTime?: number
  effects?: TechEffect[]
  unlocks?: TechUnlock[]
  prerequisites?: string[]
}

interface Props {
  tech: Tech
  canResearch: boolean
  isResearched: boolean
}

const props = defineProps<Props>()
const emit = defineEmits<{
  research: [tech: Tech]
  info: [tech: Tech]
}>()

const technologyStore = useTechnologyStore()
const resourcesStore = useResourcesStore()

// 计算属性
const hasEnoughResources = computed(() => {
  if (!props.tech.cost) return true
  return resourcesStore.resources.research >= props.tech.cost
})

// 方法
function getCategoryName(category: string): string {
  const categories: Record<string, string> = {
    physics: '物理学',
    engineering: '工程学',
    society: '社会学'
  }
  return categories[category] || category
}

function getStatusClass(): string {
  if (props.isResearched) return 'researched'
  if (props.canResearch) return 'available'
  return 'locked'
}

function getStatusText(): string {
  if (props.isResearched) return '已研究'
  if (props.canResearch) return '可研究'
  return '已锁定'
}

function getEffectIcon(type: string): string {
  const icons: Record<string, string> = {
    research_speed: '🚀',
    ship_speed: '⚡',
    weapon_damage: '⚔️',
    shield_strength: '🛡️',
    energy_efficiency: '💡',
    mining_efficiency: '⛏️',
    population_growth: '👥',
    trade_income: '💰'
  }
  return icons[type] || '📈'
}

function getUnlockIcon(type: string): string {
  const icons: Record<string, string> = {
    building: '🏢',
    ship: '🚀',
    weapon: '⚔️',
    technology: '🔬',
    policy: '📜'
  }
  return icons[type] || '🔓'
}

function formatEffect(effect: TechEffect): string {
  const typeNames: Record<string, string> = {
    research_speed: '研究速度',
    ship_speed: '舰船速度',
    weapon_damage: '武器伤害',
    shield_strength: '护盾强度',
    energy_efficiency: '能源效率',
    mining_efficiency: '采矿效率',
    population_growth: '人口增长',
    trade_income: '贸易收入'
  }
  
  const typeName = typeNames[effect.type] || effect.type
  const value = effect.value > 0 ? `+${effect.value}` : effect.value.toString()
  const unit = effect.type.includes('speed') || effect.type.includes('efficiency') ? '%' : ''
  
  return `${typeName} ${value}${unit}`
}

function formatUnlock(unlock: TechUnlock): string {
  const typeNames: Record<string, string> = {
    building: '建筑',
    ship: '舰船',
    weapon: '武器',
    technology: '科技',
    policy: '政策'
  }
  
  const typeName = typeNames[unlock.type] || unlock.type
  const name = unlock.name || unlock.id
  
  return `${typeName}: ${name}`
}

function isPrerequisiteMet(prereqId: string): boolean {
  return technologyStore.researchedTechs.includes(prereqId)
}

function getPrerequisiteName(prereqId: string): string {
  return technologyStore.technologies[prereqId]?.name || prereqId
}

function formatNumber(num: number): string {
  if (num >= 1000000) {
    return (num / 1000000).toFixed(1) + 'M'
  }
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K'
  }
  return num.toString()
}

function formatTime(seconds: number): string {
  if (seconds < 60) return `${seconds}秒`
  if (seconds < 3600) return `${Math.floor(seconds / 60)}分钟`
  if (seconds < 86400) return `${Math.floor(seconds / 3600)}小时`
  return `${Math.floor(seconds / 86400)}天`
}

function getButtonText(): string {
  if (!props.canResearch) {
    if (!hasEnoughResources.value) return '研究点不足'
    return '条件不满足'
  }
  return '开始研究'
}
</script>

<style scoped>
.tech-card {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.tech-card:hover {
  border-color: #00d4ff;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 212, 255, 0.2);
}

.tech-card.researched {
  border-color: rgba(0, 255, 136, 0.5);
  background: rgba(0, 255, 136, 0.05);
}

.tech-card.researched:hover {
  border-color: #00ff88;
  box-shadow: 0 8px 25px rgba(0, 255, 136, 0.2);
}

.tech-card.locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.tech-card.locked:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.1);
}

.card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.tech-icon {
  font-size: 2rem;
  min-width: 40px;
}

.tech-info {
  flex: 1;
}

.tech-name {
  margin: 0 0 0.25rem 0;
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 600;
}

.tech-category {
  color: #00d4ff;
  font-size: 0.875rem;
  font-weight: 500;
}

.tech-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.status-indicator {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  min-width: 60px;
}

.status-indicator.researched {
  background: rgba(0, 255, 136, 0.2);
  color: #00ff88;
}

.status-indicator.available {
  background: rgba(0, 212, 255, 0.2);
  color: #00d4ff;
}

.status-indicator.locked {
  background: rgba(128, 128, 128, 0.2);
  color: #888888;
}

.info-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 6px;
  padding: 0.375rem;
  color: #cccccc;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
}

.info-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.card-content {
  margin-bottom: 1rem;
}

.tech-description {
  color: #cccccc;
  font-size: 0.875rem;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.tech-effects {
  margin-bottom: 1rem;
}

.effects-title {
  color: #00ff88;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.effects-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.effect-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.effect-icon {
  font-size: 1rem;
  min-width: 20px;
}

.effect-text {
  color: #00ff88;
  font-weight: 500;
}

.tech-unlocks {
  margin-bottom: 1rem;
}

.unlocks-title {
  color: #f59e0b;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.unlocks-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.unlock-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.unlock-icon {
  font-size: 1rem;
  min-width: 20px;
}

.unlock-text {
  color: #f59e0b;
}

.tech-prerequisites {
  margin-bottom: 1rem;
}

.prerequisites-title {
  color: #ff6b6b;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.prerequisites-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.prerequisite-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.prerequisite-item.met {
  opacity: 0.7;
}

.prerequisite-icon {
  font-size: 1rem;
  min-width: 20px;
}

.prerequisite-text {
  color: #ff6b6b;
}

.prerequisite-item.met .prerequisite-text {
  color: #00ff88;
  text-decoration: line-through;
}

.tech-cost {
  margin-bottom: 1rem;
}

.cost-title {
  color: #00d4ff;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.cost-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 6px;
  font-size: 0.875rem;
  color: #00d4ff;
}

.cost-icon {
  font-size: 1rem;
}

.cost-amount {
  font-weight: 500;
}

.research-time {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: #888888;
}

.time-icon {
  font-size: 1rem;
}

.card-footer {
  display: flex;
  justify-content: center;
}

.research-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #00d4ff, #0099cc);
  color: #000000;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  justify-content: center;
}

.research-btn:hover:not(.disabled) {
  background: linear-gradient(135deg, #0099cc, #007399);
  transform: translateY(-1px);
}

.research-btn.disabled {
  background: rgba(128, 128, 128, 0.3);
  color: #888888;
  cursor: not-allowed;
}

.researched-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: rgba(0, 255, 136, 0.2);
  color: #00ff88;
  border-radius: 8px;
  font-weight: 600;
  width: 100%;
  justify-content: center;
}

.btn-icon,
.badge-icon {
  font-size: 1rem;
}

.btn-text,
.badge-text {
  font-size: 0.875rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .tech-card {
    padding: 0.75rem;
  }
  
  .card-header {
    gap: 0.5rem;
  }
  
  .tech-icon {
    font-size: 1.5rem;
    min-width: 30px;
  }
  
  .tech-name {
    font-size: 1rem;
  }
  
  .tech-status {
    align-items: center;
  }
  
  .research-btn,
  .researched-badge {
    padding: 0.625rem 1rem;
  }
}
</style>